<template>
  <div>
    <a-row>
      <a-col :span="12">
        <a-form :model="Data"  :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }">
          <a-form-item label="任务名称">
            <a-input  v-model:value="Data.task_name" /> 
          </a-form-item>
          <a-form-item label="任务id">
            <a-row>
              <a-col :span="22">
                <a-input placeholder="不可为空 示例:01ef312b_8197_4a2b_bd73_d9d50cbe" v-model:value="Data.taskid"></a-input>
              </a-col>
              <a-col :span="1"></a-col>
              <a-col :span="1">
                <a-tooltip  placement="right">
                  <template #title>AI任务的ID,如果添加多个任务的话,就会变成一个任务,请不要刷新任务id</template>
                  <a-button @click="get_task_guid" style="margin: 0 auto;margin-right: 10px;">
                    <template #icon>
                      <plus-outlined />
                    </template>
                  </a-button>
                </a-tooltip>
              </a-col>
            </a-row>
        </a-form-item>
        <a-form-item label="AI任务ID">
          <a-row>
              <a-col :span="22">
                <a-input placeholder="可以为空  示例:01ef312b_8197_4a2b_bd73_d9d50cbe" v-model:value="Data.aiid"></a-input>
              </a-col>
              <a-col :span="1"></a-col>
              <a-col :span="1">
                <a-tooltip  placement="right">
                  <template #title>AI任务的uuid,如果不填服务器自动提供</template>
                  <a-button @click="get_ai_guid" style="margin: 0 auto;margin-right: 10px;">
                    <template #icon>
                      <plus-outlined />
                    </template>
                  </a-button>
                </a-tooltip>
              </a-col>
            </a-row>
        </a-form-item>
        <a-form-item label="AI软件">
          <a-space>
            <a-checkbox   @change="onChange_soft_alibaba"  :checked="soft.alibaba">阿里巴巴AI</a-checkbox>
            <a-checkbox   @change="onChange_soft_baidu"  :checked="soft.baidu" :disabled="true">百度AI(暂不支持)</a-checkbox>
          </a-space>
        </a-form-item>
        <a-form-item label="裁切小影像">
          <a-space>
            <a-tooltip  placement="right">
              <template #title>计算结果如果需要裁切形成小影像时勾选</template>
              <a-checkbox @change="onChange_work"  :checked="Data.clip" :disabled="temp.clip_totask_disable">裁切成小影像</a-checkbox>
            </a-tooltip>
          </a-space>
        </a-form-item>
        <a-form-item label="人工内业判译">
          <a-space>
            <a-tooltip  placement="right">
              <template #title>裁切形成小影像需要人工内业判译时勾选</template>
              <a-checkbox @change="onChange_towork"  :checked="Data.totask"  :disabled="temp.clip_totask_disable">人工内业判译</a-checkbox>
            </a-tooltip>
          </a-space>
        </a-form-item>
        <a-form-item label="回调接口">
          <a-row>
            <a-col :span="18">
              <a-input placeholder="回调地址" v-model:value="Data.action"></a-input>
            </a-col>
            
            <a-col :span="1">
              <a-tooltip  placement="right">
                <template #title>任务完成后向调用者回调结果,由使用者自定义的GET接口</template>
                <question-outlined />    
              </a-tooltip>
            </a-col>
            <a-col :span="1"></a-col>
            <a-col :span="4">
              <a-tooltip  placement="right">
                <template #title>如果需要进入精度在线查看则需要勾选</template>
                <a-checkbox @change="onChange_soft_action"  :checked="Data.totask"  :disabled="temp.clip_totask_disable">勾画</a-checkbox>
              </a-tooltip>
            </a-col>
          </a-row>
        </a-form-item>
        
        <a-form-item :wrapper-col="{ span: 8, offset: 12 }">
          <a-button type="primary"  @click="add_ai_task">提交</a-button>
        </a-form-item>
        </a-form>
      </a-col>
      <a-col :span="12">
        <a-form :model="Data"  :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }">
          <a-form-item label="默认数据地址:">
            <a-alert message="Z:\change_for_zhifa" banner type="info"/>
          </a-form-item>
        </a-form>
        <a-row style="margin-left: 20px;">
          <a-tabs v-model="data_avtive_key"  :default-active-key="default_data_avtive_key" @change="tabs_change" style="width: 100%;">
              <a-tab-pane :key="1" tab="单景数据">
                <a-form :model="one_data"  :label-col="{ span: 4 }" :wrapper-col="{ span: 20 }">
                  <div>
                    <a-form-item label="前一期" >
                      <a-input  placeholder="前一期影像"  v-model:value="one_data.pre" style="width:85%" allowClear></a-input> 
                    </a-form-item>
                    <a-form-item label="后一期" >
                      <a-input placeholder="后一期影像" v-model:value="one_data.lst" style="width:85%" allowClear>
                      </a-input>
                    </a-form-item>
                    <a-form-item label="面积过滤的阈值">
                    <a-row>
                      <a-col :span="22">
                        <a-input placeholder="" v-model:value="Data.area"></a-input>
                      </a-col>
                      <a-col :span="1"></a-col>
                      <a-col :span="1">
                        <a-tooltip  placement="right">
                          <template #title>0~255</template>
                          <question-outlined />    
                        </a-tooltip>
                      </a-col>
                    </a-row>
                  </a-form-item>
                  <a-form-item label="置信度">
                    <a-row>
                      <a-col :span="22">
                        <a-input placeholder="" v-model:value="Data.threshold"></a-input>
                      </a-col>
                      <a-col :span="1"></a-col>
                      <a-col :span="1">
                        <a-tooltip  placement="right">
                          <template #title>0~255</template>
                          <question-outlined />    
                        </a-tooltip>
                      </a-col>
                    </a-row>
                  </a-form-item>
                  </div>
                  </a-form>
              </a-tab-pane>
              <a-tab-pane :key="2" tab="多景数据">
                <a-row>
                  <a-space>
                    <a-tooltip  placement="bottom">
                      <template #title>查看数据源(excle)模版</template>
                      <a-button @click="show_excle_temp" style="margin: 0 auto;margin-right: 10px;">
                          <template #icon><question-outlined /></template>
                      </a-button>
                    </a-tooltip>
                    <a-tooltip  placement="bottom">
                      <template #title>添加数据源(excle)</template>
                      <a-button @click="add_excle" style="margin: 0 auto;margin-right: 10px;">
                          <template #icon><plus-outlined /></template>
                      </a-button>
                    </a-tooltip>
                    <a-tooltip  placement="bottom">
                        <template #title>清空</template>
                        <a-button @click="clear_excle" style="margin: 0 auto;margin-right: 10px;">
                            <template #icon><minus-outlined/></template>
                        </a-button>
                    </a-tooltip>
                    <input type="file" ref="excle_input" id="excle_input"  style="display: none;" @change="get_excle">
                  </a-space>
                </a-row>
                <a-row>
                  <a-table 
                  :data-source="milts_data" 
                  :columns="input_columns" 
                  class="task-table"
                  size="small" 
                  :showHeader="true" 
                  tableLayout="fixed"
                  :pagination="false" 
                  bordered 
                  rowKey="index"
                  style="max-height: 400px;overflow-y: auto;"
                  >
                    <template #bodyCell="{ text, record, index, column }">
                    </template>
                  </a-table>
                </a-row>
                


                <!-- <a-row :key="index"  v-for="(record, index) in milts_data" >
                  <a-col :span="1">{{  index+1}}</a-col>
                  <a-col :span="8">
                    <a-form-item label="前一期" >
                      <a-tooltip  placement="bottom">
                        <template #title>{{ milts_data[index].pre }}</template>
                        <a-input  v-model:value="milts_data[index].pre" placeholder="前一期影像" size="small" allowClear/>
                      </a-tooltip>
                    </a-form-item>
                  </a-col>
                  <a-col :span="8">
                    <a-form-item label="后一期" >
                      <a-tooltip  placement="bottom">
                        <template #title>{{ milts_data[index].lst }}</template>
                        <a-input  v-model:value="milts_data[index].lst" placeholder="后一期影像" size="small" allowClear/>
                      </a-tooltip>
                    </a-form-item>
                  </a-col>
                  <a-col :span="3">
                    <a-form-item label="area" >
                      <a-tooltip  placement="bottom">
                        <template #title>{{ milts_data[index].area }}</template>
                        <a-input  v-model:value="milts_data[index].area" placeholder="" size="small" allowClear/>
                      </a-tooltip>
                    </a-form-item>
                  </a-col>
                  <a-col :span="3">
                    <a-form-item label="threshold" >
                      <a-tooltip  placement="bottom">
                        <template #title>{{ milts_data[index].threshold }}</template>
                        <a-input  v-model:value="milts_data[index].threshold" placeholder="" size="small" allowClear/>
                      </a-tooltip>
                    </a-form-item>
                  </a-col>
                </a-row> -->
              </a-tab-pane>
            </a-tabs>
        </a-row>
      </a-col>
    </a-row>
   <a-modal v-model="show_get_tif" 
   :maskClosable="false"
   title="Modal" 
   ok-text="确认" 
   okType="dashed"
   :destroyOnClose="true"
   cancel-text="取消" 
   cancelokType="dashed"
   @ok="get_tif_ok"
   @cancel="get_tif_cancle"
   >
    <a-row>
      <a-radio-group name="radioGroup"  v-model="source.check_type" @change="change_source_type">
        <a-radio :value="1">自上传影像</a-radio>
        <a-radio :value="2">长光影像</a-radio>
        <a-radio :value="3">公益卫星</a-radio>
        <a-radio :value="4" disabled>其他</a-radio>
      </a-radio-group>
    </a-row>
    <a-row v-if="source.check_type==1">
      1
    </a-row>
    <a-row  v-if="source.check_type==2">
      2
    </a-row>
    <a-row  v-if="source.check_type==3">
      3
    </a-row>
    </a-modal>
  </div>
</template>
<script>
export default {
  data() {
    return {
      // form: this.$form.createForm(this, { name: 'form' }),
      // form_source: this.$form.createForm(this, { name: 'form_source' }),
      soft:{
        alibaba:true,
        baidu:false,
        
      },
      temp:{
        action:false,
        clip_totask_disable:false,
      },
      data_avtive_key:1,
      default_data_avtive_key:1,
      one_data:{
        pre:"",
        lst:"",
        area:50,
        threshold:127,
      },
      milts_data:[],
      input_columns: [
        {
          title: '序号',
          dataIndex: 'index',
          align: 'center',
          width: '80px',
        },
        {
          title: '前',
          dataIndex: 'pre',
          align: 'center',
          // width: '100px',
          ellipsis: true,
        },
        {
          title: '后',
          dataIndex: 'lst',
          align: 'center',
          // width: '100px',
          ellipsis: true,
        },
        {
          title: 'area',
          dataIndex: 'area',
          align: 'center',
          width: '50px',
        },
        {
          title: 'threshold',
          dataIndex: 'threshold',
          align: 'center',
          width: '80px',
        },
      ],
      Data:{
        task_name:"",
        taskid:"",
        aiid:"",
        input:"",
        clip:false,
        totask:false,
        
        action:'',
        soft:"",


        geom:{
          type:'wkt',
          data:''
        }
      },
      show_get_tif:false,
      pre_tif1:{},
      pre_tif2:{},
      source:{
        check_type:1,
      }
    }
  },
  computed:{

  },
  methods: {
    onChange_soft_alibaba(e){
      this.soft.alibaba=e.target.checked
    },
    onChange_soft_baidu(e){
      this.soft.baidu=e.target.checked
    },
    onChange_soft_action(e){
      this.temp.action=e.target.checked
      if( this.temp.action==true){
        this.Data.action="http://192.168.1.240:8001/action_ai_back?"
        this.temp.clip_totask_disable=true;
      }
      else{
        this.Data.action=""
        this.temp.clip_totask_disable=false;
      }
    },
    get_ai_guid(){
      global["vapp"].config.globalProperties.$axios_get("/change/guid?").then(result => {
        if(result){
          this.Data.aiid=result
        }
      });
    },
    get_task_guid(){
      global["vapp"].config.globalProperties.$axios_get("/change/guid?").then(result => {
        if(result){
          this.Data.taskid=result
        }
      });
    },
    tabs_change(activeKey) {
      this.data_avtive_key = activeKey
    },
    onChange_work(e){
      this.Data.clip=e.target.checked
    },
    onChange_towork(e){
      this.Data.totask=e.target.checked
    },
    add_excle(){
      this.$refs.excle_input.click()
    },
    clear_excle(){
      this.milts_data=[]
    },
    show_excle_temp(){

    },
    async get_excle(event){
      let selectedFile = event.target.files[0]
      let workbook=await this.$common_apis.read_xml_to_workbook(selectedFile)
      document.getElementById('excle_input').value= ''; 
      let  SheetName="";
      if(Array.isArray(workbook?.SheetNames)){
        if(workbook?.SheetNames?.length){
          SheetName=workbook?.SheetNames[0]
        }
      }
      if(!SheetName){
        this.$message.info("选择的excle没有sheet")
        return
      }
      let rows=await this.$common_apis.read_workbook(workbook,SheetName)
      this.milts_data=[]
      for (let index = 0; index < rows.length; index++) {
        let element = rows[index];
        element.index=index+1
        element.pre=element.pre.replaceAll("\\","/")
        element.lst=element.lst.replaceAll("\\","/")
        this.milts_data.push(element)
      }
    },
    check_ai_soft(){
      let status=false;
      this.Data.soft=[]
      let softs=[]
      for(let key in this.soft){
        if(this.soft[key]==true){
          status=true
          softs.push(key)
        }
      }
      this.Data.soft=softs.join(',')
      return status
    },
    add_ai_task() {
      if(!this.Data.taskid){
        this.$message.info("任务id必须存在!")
        return
      }
      if(this.check_ai_soft()==false){
        this.$message.info("至少需要选择一个AI提取软件!")
        return
      }
      this.Data.input=[];
      if(this.data_avtive_key=="1"){
        if(this.one_dat?.pre && this.one_dat?.lst){
          this.Data.input=[this.one_data]
        }
      }
      else if(this.data_avtive_key=="2"){
        this.Data.input=this.milts_data
      }
      if(this.Data.input?.length==0){
        this.$message.info("前后影像对必须存在!")
        return
      }
      this.Data.clip=this.Data.clip
      this.Data.totask=this.Data.totask
      let copy_data=JSON.parse(JSON.stringify(this.Data))
      if(this.temp.clip_totask_disable==true){
        copy_data.clip=""
        copy_data.totask=""
      }
      console.log(copy_data)
      global["vapp"].config.globalProperties.$axios_post("/change/add_ai_task?",copy_data,true)
      .then(result => {
        if(result>0){
          this.$message.success("任务添加成功")
          this.Data.input=[];
        }
        else{
          this.$message.error("任务添加失败")
        }
      });
    },
    change_source_type(e){
      //console.log(e.target.value)
    },
    change_geom_type(e){
      //console.log(e.target.value)
    },
    onGetGeom(){
      console.log(this.Data.geom.type)
      if(this.Data.geom.type=='wkt'){

      }
      else if(this.Data.geom.type=='geojson'){
        setTimeout(()=>{
          this.$refs.inputfile.click();
        },10)
      }
      else if(this.Data.geom.type=='shp-buffer'){
        setTimeout(()=>{
          this.$refs.inputfile.click();
        },10)
      }
    },
    onDrawGeom(){
      console.log('onDrawGeom')
    },
    change_data(e){
      this.Data.geom.data=e.target.value
    },
    changefile(event){
      let file=''
      event.srcElement.files.forEach((_file,_index) => {
        file=_file
      });
      document.getElementById('inputfile').value= '';
      let fileExtension =file.name.split('.').pop().toLowerCase();
      if(this.Data.geom.type=='wkt'){

      }
      else if(this.Data.geom.type=='geojson'){
        if(fileExtension=='geojson'){
          this.FileReader(file,'readAsText')
        }
        else{
          this.$message.error(`只支持.geojson格式的文件.`)
        }
      }
      else if(this.Data.geom.type=='shp-buffer'){
        if(fileExtension=='shp'){
          this.FileReader(file,'readAsArrayBuffer')
        }
        else{
          this.$message.error(`只支持.shp格式的文件.`)
        }
      }
    },
    FileReader(file,type="readAsText"){ 
      let reader = new FileReader();
      reader.onload = (ev)=> {
        if(ev.target.result) {
          let _data_show=''
          let arr2 =''
          if(this.Data.geom.type=='shp-buffer'){
            arr2 =JSON.stringify(Array.prototype.slice.call(new Int8Array(ev.target.result )))
          }
          else if(this.Data.geom.type=='geojson'){
            arr2=ev.target.result
          }
          _data_show=arr2.substring(0,200)
          if(arr2.length>200){
            _data_show+="..."
          }
          this.form_source.setFieldsValue({
            data: _data_show,
          });
          this.Data.geom.data=arr2
        }
      };
      reader[type](file);
    },
    async onGetTif(type=1){
      this.show_get_tif=true
      this.Wait_get_tif =new Promise((resolve)=>{this.Wait_get_tif_resolve=resolve;});
      let Wait_get_tif_done=await this.Wait_get_tif
      if(Wait_get_tif_done){
        // this.$common_apis.axios_post("/update_admin?",{
        //   mergeid:this.mergeid,
        //   name:this.fenpei_name,
        //   from:this.num_from-0,
        //   to:this.num_to-0,
        // },true)
        // .then(res => {
        //   if (res) {
        //     this.search(this.task_one_pagination.ucurrent);
        //   }
        // });
        return true
      }
      return false
    },
    get_tif_ok(){
      let ok=false
      // this.num_from=this.num_from-0
      // this.num_to=this.num_to-0
      // if(this.num_from>0 && this.num_to>0 &&this.num_from <=this.num_to){
      //   ok=true
      // }
      // else{
      //   this.$message.info('必须是数字,并且第一个应不大于第二个数字');
      //   return false
      // }
      // if(this.fenpei_name){
      //   ok=true
      // }
      // else{
      //   this.$message.info('没有选择分配给谁呢');
      //   return false
      // }
      if(ok){
        this.Wait_get_tif_resolve(true);
        this.show_get_tif=false
      }
    },
    get_tif_cancle(){
      this.show_get_tif=false
      this.Wait_get_tif_resolve(false);
    },
    OpenShape(_shpfile){
      return new Promise((resolve)=>{
        let reader = new FileReader();
        reader.onload = (e)=> {
          let text = reader.result;
          ShpFile.loading.shpdataOffset=0;
          if(text.byteLength<100){
            resolve("shp文件不能小于100字节！");
          }
          console.log(text)
          resolve(true)
        }
        reader.readAsArrayBuffer(_shpfile);
      });
    }
  },
}
</script>